import React, { useState, useEffect } from 'react';
import { Form, InputNumber, Popover, Icon } from 'antd';
import { isEqual } from 'lodash';
import EditTable from './EditTable';

// 财务交接
const FinanceCountersign = ({ value = [], onChange, config }) => {
    const [dataSource, setDataSource] = useState(value);
    const [ruleStatus, setRuleStatus] = useState(null);
    const [columns, setColumns] = useState([]);

    React.useEffect(() => {
        const { options } = config;
        setRuleStatus(options?.disabled);
    }, [config]);

    useEffect(() => {
        if (onChange) {
            onChange(dataSource);
        }
    }, [JSON.stringify(dataSource)]);

    useEffect(() => {
        if (value.length > 0) {
            const arr = value.map(item => {
                const obj = item;
                if (!item.isValidatorPass) {
                    obj.isValidatorPass = false;
                }
                return obj;
            });
            setDataSource(arr);
        }
    }, [JSON.stringify(value)]);

    const handleRowSave = row => {
        const newData = dataSource;
        const index = newData.findIndex(item => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, {
            ...item,
            ...row,
            isValidatorPass: true
        });
        setDataSource([...newData]);
    };

    useEffect(() => {
        const tempColumns = [
            {
                title: '交接事项',
                dataIndex: 'financeType',
                width: '36%'
            },
            {
                title: '交接结果',
                dataIndex: 'receiveResult',
                width: '36%',
                editable: true,
                rules: [
                    {
                        required: true,
                        message: '请输入'
                    }
                ]
            },
            {
                title: '金额',
                dataIndex: 'amount',
                editable: true,
                editrender: ({ record, save, form, dataIndex }) => (
                    <>
                        <Form.Item style={{ margin: 0 }}>
                            <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
                                {form.getFieldDecorator(dataIndex, {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入'
                                        }
                                    ],
                                    initialValue: record[dataIndex] || undefined
                                })(
                                    <InputNumber
                                        onPressEnter={save}
                                        max={1000000000}
                                        min={-1000000000}
                                        onBlur={save}
                                        placeholder="请输入"
                                        precision={2}
                                        maxLength={10}
                                        style={{ flex: 1 }}
                                    />
                                )}
                                <Popover
                                    content={
                                        <div style={{ width: 320 }}>
                                            请按本国货币输入金额。例如，国内请输入人民币金额，新加坡请输入新币金额。
                                        </div>
                                    }
                                    placement="top"
                                    getPopupContainer={e => e.parentElement}
                                >
                                    <Icon
                                        type="question-circle"
                                        style={{ marginLeft: 5, display: 'flex', alignItems: 'center' }}
                                    />
                                </Popover>
                            </div>
                        </Form.Item>
                    </>
                ),
                render: text => text && Number(text).toFixed(2)
            }
        ];
        setColumns([...tempColumns]);
    }, [dataSource, value]);

    // 权限控制列展示
    useEffect(() => {
        if (ruleStatus && ruleStatus === true && columns.length > 0) {
            const arr = columns
                .filter(item => item.dataIndex !== 'operation')
                .map(item => ({ ...item, editable: false }));
            if (!isEqual(arr, columns)) {
                setColumns([...arr]);
            }
        }
    }, [ruleStatus, columns]);

    return <EditTable dataSource={dataSource} columns={columns} handleRowSave={handleRowSave} rowKey="key" />;
};

export default React.forwardRef(FinanceCountersign);
